<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        /*匹配段落中带有name属性的元素*/
        /*p[name]{*/
        /*    color:red;*/
        /*}*/

        /*匹配段落中name属性值为p1的元素*/
        /*p[name='p1']{*/
        /*    color:red;*/
        /*}*/

        /*匹配段落中name属性值以p开头*/
        /*p[name^='p']{*/
        /*    color:red;*/
        /*}*/

        /*匹配段落中name属性值以2结尾的元素*/
        /*p[name$='2']{*/
        /*    color:red;*/
        /*}*/

        /*匹配段落中name属性值含有p的元素*/
        p[name*='p']{
            color:red;
        }

        .c1{
            color:green;
        }
        div span{
            color:blue;
        }
    </style>
</head>
<body>
<p name="p1">第1个段落</p>
<p name="p2">第2个段落</p>
<p name="ap2">第3个段落</p>
<p >第4个段落</p>
<p name="p5">第5个段落</p>
<div class="c1">
    <div>这是c1中的div</div>
    <span>这是c1中的span</span>
    <p>这是c1中的段落</p>
    <div>
        <span>这是c1中的div中的span</span>
    </div>
</div>
</body>
</html>